﻿@{
    ViewBag.Title = "ManagePicture";
}

@model Springwater.Business.ViewModels.ManagePictureModel

@section Head{
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
}

<h1>Fenykepek</h1>

<div id="divPictureList">
@Html.Partial("PictureList", Model)
</div>

<form id="myForm" action="@Url.Action("UploadPicture")" method="post" enctype="multipart/form-data">
    @Html.Hidden("borvizId", Model.BorvizId)
    <table>
        <tr>
            <td>File:</td>
            <td><input type="file" style="width:300px;" name="file"></td>
        </tr>
        <tr>
            <td>Szerzo:</td>
            <td>@Html.TextBox("szerzo")</td>
        </tr>
        <tr>
            <td>Datum:</td>
            <td>@Html.TextBox("datum")</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Feltolt"></td>
        </tr>
    </table> 
 </form>
 
 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>
 
<div id="message"></div>

@section scripts{
    <script>
        $(document).ready(function () {

            var options = {
                beforeSend: function () {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    $("#bar").width(percentComplete + '%');
                    $("#percent").html(percentComplete + '%');

                },
                success: function () {
                    $("#bar").width('100%');
                    $("#percent").html('100%');
                },
                complete: function (response) {
                    var message = "A feltoltes sikerult.";
                    
                    if (response.responseText != "") {
                        message = response.responseText;
                    }
                    else {
                        $("#myForm").resetForm();
                        RefreshPictureList();
                    }

                    $("#message").html("<font color='green'>" + message + "</font>");
                },
                error: function () {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }

            };

            $("#myForm").ajaxForm(options);

        });

        function RefreshPictureList() {
            var borvizId = $("[name=borvizId]").val();

            $.post("@Url.Action("PictureList")", {borvizId : borvizId}, function(result) { $("#divPictureList").html(result); });
        }

</script>
}
